<script setup lang="ts">
import {ref, nextTick} from 'vue'
import maFormModal from '@/components/ma-form-modal/index.vue'// form 组件的 ref
import serviceParcelDeclaration from '@/api/logistics/serviceParcelDeclaration'
import {Message} from "@arco-design/web-vue";
import commonApi from "@/api/common";

const modalForm = ref()

// 表单数据
const form = ref({})
const dict = {
  name: 'ServiceDeclaration',
  translate: true,
}

const visible = ref(false)
// 组件的字段设置
const columnsOptions = ref([])

const props = defineProps({
  show: {
    type: Boolean,
    default: false
  }
})
const open = async (record) => {
  let res = await serviceParcelDeclaration.read(record.id)
  form.value = res.data
  form.value.service_id = record.id
  if (!columnsOptions.value.length) {
    let dictRes = await commonApi.getDict('declaration')
    let cols = []
    let length = dictRes.data.length
    let colNumber = 3
    let col = Math.ceil(length / colNumber)
    for (let i = 0; i < length; i++) {
      if (i % col == 0) {
        cols.push({formList: []})
      }
      cols[cols.length - 1].formList.push({
        title: dictRes.data[i].title,
        dataIndex: dictRes.data[i].key,
        formType: 'radio',
        dict
      })
    }
    columnsOptions.value.push({formType: 'grid-tailwind', colNumber: colNumber, cols: cols})
  }
  visible.value = true
  await nextTick(() => {
    modalForm.value.open(form.value)
  })
}
const submit = async (val) => {
  const res = await serviceParcelDeclaration.update(form.value.service_id, val);
  if (res.success != true) {
    Message.error(res.message)
    return false;
  }
  return true;
}
defineExpose({open})
</script>
<template>
  <ma-form-modal v-model="form" :columns="columnsOptions" ref="modalForm" :submit="submit" @cancel="visible = false" v-if="visible"/>
</template>
<style scoped></style>